
<ui:composition template="../template/plantilla_01.xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="head">
        <h:outputStylesheet library="css" name="css_boxes.css"/>
    </ui:define>

    <ui:define name="panelCentral">

            <!--Load the AJAX API-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawMap);
      function drawMap() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Lat');
        data.addColumn('number', 'Lon');
        data.addColumn('string', 'Name');
        data.addRows(5);

        data.setCell(0, 0, -27.456221531494087);
        data.setCell(0, 1, -58.99408757686615);
        data.setCell(0, 2, 'RESISTENCIA (Chaco, Corrientes, Formosa, Misiones, Santa Fe Norte)');

        data.setCell(1, 0, -26.818179993869215);
        data.setCell(1, 1, -65.21757155656814);
        data.setCell(1, 2, 'TUCUMAN (Tucuman, Santiago del Estero, Salta, Jujuy, Catamarca, La Rioja)');

        data.setCell(2, 0, -32.89961687971874);
        data.setCell(2, 1, -68.83070826530456);
        data.setCell(2, 2, 'MENDOZA (Mendoza,San Juan,San Luis)');
        data.setCell(3, 0, -34.69305618669921);
        data.setCell(3, 1, -58.3908212184906);
        data.setCell(3, 2, 'BUENOS AIRES (Bueno Aires, Santa Fe Centro, Santa Fe Sur, Cordoba, La Pampa, Patagonia)');
        data.setCell(4, 0, -29.145180541549756);
        data.setCell(4, 1, -59.64603066444397);
        data.setCell(4, 2, 'HEADQUARTERS (Equipo Comercial y Administrativo Central)');

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {showTip: true,mapType: 'normal',useMapTypeControl:true });
      }
    </script>
        
    <h:form id="formulario">
        
        <p:tabView orientation="left">

            <p:tab title="Home" >

                <p:galleria value="#{presentacionBean.lista}" var="i" panelWidth="970"
                            panelHeight="320" showCaption="true"  >

                    <p:graphicImage value="#{i}" />

                    
                        <h:panelGrid  columns="1" cellpadding="1" >

                            <f:facet name="header">
                                <div align="center">
                                <h:commandLink action="#"  >
                                    <p:graphicImage value="#{i}" height="300" />
                                </h:commandLink>
                                </div>
                            </f:facet>
                        </h:panelGrid>
                    

                </p:galleria>

            </p:tab>

            <p:tab title="Almacenes">

                <h:panelGrid columns="2" columnClasses="colTop,colTop" cellspacing="5" >

                    <ui:include src="../global/datosSucursales.xhtml" />

                    <h:panelGroup>
                        <!--Div that will hold the pie chart-->
                        <div id="map_div" style="width:580px;height:350px;border:1px #999999" ></div>

                    </h:panelGroup>

                </h:panelGrid>

            </p:tab>

            <p:tab title="Catálogo">

            </p:tab>

            <p:tab title="Acceso a Cliente">

            </p:tab>

            <p:tab title="Revista Exclusivo Motos">

            </p:tab>

            <p:tab title="Contacto" >

                <h:panelGrid columns="2" columnClasses="colTop,colTop" >

                    <h:panelGroup>

                        <p:messages id="infoContacto" showDetail="true" />

                        <h:panelGrid columns="2" style="width: 580px;" >

                            <h:outputText value="Nombre: " />
                            <p:inputText value="#{contactoBean.nombreContacto}" required="True" requiredMessage="El nombre es obligatorio" size="40"/>

                            <h:outputText value="E-mail" />
                            <p:inputText value="#{contactoBean.emailContacto}" required="True" requiredMessage="El email es obligatorio" size="40"/>

                            <h:outputText value="Motivo consulta" />
                            <p:inputText value="#{contactoBean.asunto}" size="40" />

                            <h:outputText value="Consulta:" />
                            <p:inputTextarea value="#{contactoBean.mensaje}" cols="50" rows="5" required="True" requiredMessage="Debe ingresar una consulta" />

                        </h:panelGrid>

                        <p:commandButton id="btnEnviar"
                                         value="Enviar"
                                         icon="send16"
                                         action="#{contactoBean.enviarMail}" update=":formulario" />
                    </h:panelGroup>

                    <ui:include src="../global/datosSucursales.xhtml" />

                </h:panelGrid>

            </p:tab>

        </p:tabView>

    </h:form>

    </ui:define>
    
</ui:composition>

